<!-- 成交确认 -->
<template>
  <div class="set_completed">
    <x-header>成交确认</x-header>
    <box gap="10px 10px">
      <div class="set_card">
        <div class="title">
          <div class="title-content">
            {{orderInfo.Brief}}
          </div>
          <div class="title-footer">
            <div>{{orderInfo.State|orderStatus}}</div>
            <!-- <div>{{+orderInfo.balance>0 ? `￥${orderInfo.balance}元`:`未出价`}}</div> -->
            <div>{{orderInfo.DateCreated|YYYYMMDDHHmmss}}</div>
          </div>
        </div>
        <div class="sc_body">
          <div class="pram">
            <div class="title">请从申请接单列表选择接单人</div>
            <div class="subtitle">
              <div>箱子总量：{{orderInfo.num}}</div>
              <div>剩余：{{+orderInfo.num-(+orderInfo.folNum)}}</div>
            </div>
            <group>
              <selector title="选择接单人" v-model="myreceiver" :options="receiver"></selector>
            </group>
            <x-input title="运费金额" placeholder="请输入金额" v-model="money" type="number"></x-input>
            <x-input title="箱量" placeholder="请输入箱量" v-model="mynum" type="number"></x-input>
            <box gap="30px 0 10px 0">
              <x-button @click.native="sure" type="primary">确认</x-button>
           </box>
          </div>
        </div>
      </div>
    </box>
  </div>
</template>

<script>
import {
  XDialog,
  XHeader,
  Cell,
  Box,
  Group,
  Selector,
  XInput,
  PopupPicker,
  XTable,
  XButton,
  Icon
} from 'vux'
import {
  orderList,
  updataFollows
} from '../../api/api'
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  name: 'setCompleted',
  components: {
    XDialog,
    XHeader,
    Cell,
    Box,
    Group,
    Selector,
    XInput,
    PopupPicker,
    XTable,
    XButton,
    Icon
  },
  data () {
    return {
      tableList: [],
      money: '',
      receiver: [],
      mynum: 1,
      myreceiver: '',
      mydata: []
    }
  },
  mounted () {
    if (this.$router.currentRoute.query.hasOwnProperty('msgid')) {
      let msgid = this.$router.currentRoute.query.msgid
      this.getOrderInfo(msgid)
      this.getOrderList(msgid)
    }
  },
  destroyed () {
    this.resetOrderInfo()
  },
  computed: {
    ...mapState({
      orderInfo: state => state.order.orderInfo
    })
  },
  methods: {
    onBlur (val) {
      console.log('on blur', val)
    },
    getOrderList (msgid) {
      orderList({
        MessageId: msgid,
        state: 1
      }).then(res => {
        if (res.status === 200) {
          this.tableList = res.data
          res.data.map((item) => {
            this.receiver.push(item.UserCode.trim())
          })
          console.log(this.tableList, this.receiver, '接单人列表')
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    sure () {
      let receiverList = []
      this.mydata = []
      if (this.myreceiver === '') {
        this.$vux.toast.text('请选择接单人')
        return false
      }
      const findIndex = this.tableList.findIndex((item) => {
        return item.UserCode.trim() === this.myreceiver
      })
      if (findIndex > -1) {
        this.mydata.push(this.tableList[findIndex])
      }
      if (this.mynum === '') {
        this.$vux.toast.text('请输入箱量')
        return false
      }
      if (this.mynum > (+this.orderInfo.num - (+this.orderInfo.folNum))) {
        this.$vux.toast.text('您的箱量已超出订单总箱量')
        return false
      }
      let numb = parseInt(this.money)
      if (!/^\d+(\.\d+)?$/.test(numb)) {
        this.$vux.toast.text('请输入正确的运费金额')
        return false
      }
      console.log(this.mydata, 'ffffffffffff')
      this.mydata.map((item) => {
        receiverList.push({
          checkname: item.NickName.trim(),
          makeSureNum: parseInt(this.mynum),
          UserMoney: numb
        })
      })
      console.log(receiverList, 'okkokoooo')
      updataFollows({
        msgid: this.orderInfo.MessageId,
        state: 2,
        receiverList: receiverList
      }).then(res => {
        if (res.status === 200) {
          this.$vux.toast.text(res.msg)
          this.$router.push({
            path: '/main/order'
          })
        } else {
          this.$vux.toast.text(res.msg)
          receiverList = []
          this.mydata = []
          console.log(receiverList, '00000000000000000000')
        }
      })
    },
    ...mapMutations({
      resetOrderInfo: 'order/resetOrderInfo'
    }),
    ...mapActions({
      getOrderInfo: 'order/getOrderInfo'
    })
  }
}
</script>

<style lang="less">
.set_completed {
  .set_card {
    border: 1px solid #ddd;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    border-radius: 4px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    .title {
      .title-content {
        min-height: 50px;
      }
      .title-footer {
        margin-top: 15px;
        font-size: 13px;
        color: grey;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .sc_body {
    padding-top: 10px;
    .pram {
      .title {
        // background-color: #fafafa;
        background-color: #eee;
        font-size: 14px;
        padding: 5px;
      }
      .subtitle {
        margin-top: 5px;
        font-size: 13px;
        color: grey;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
